{% extends "base.html" %}


{% block title %}疫情防控系统-主页{% endblock %}


{% block content %}
    <div class="container-fluid">
          <div class="row">
              <div class="col-md-6">
                  <div id="zhuzhuangtu" style="height: 600px;"></div>
              </div>
              <!-- /.col -->
              <div class="col-md-6">
                  <div id="meiguitu" style="height: 600px;"></div>
              </div>
              <!-- /.col -->
          </div>
          <!-- /.row -->
    </div><!--/. container-fluid -->
{% endblock %}


{% block script %}
    <!-- eChartsJS -->
    <script src="/static/js/echarts.js"></script>
    <script>
    // real_time = 1: todo 打开数据
    var real_time = 1;
    var id_camera = -1;

    // todo 柱状图
    var chartDom_zhuzhuangtu = document.getElementById('zhuzhuangtu');
    var myChart_zhuzhuangtu = echarts.init(chartDom_zhuzhuangtu, 'dark');
    var option_zhuzhuangtu;
    option_zhuzhuangtu = {
      xAxis: {
        type: 'category',
        data: ['mask', 'no mask', 'all']
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          data: [
            {
              value: 120,
              itemStyle: {
                color: '#12ED93'
              }
            },
            {
              value: 80,
              itemStyle: {
                color: '#3F77FE'
              }
            },
            {
              value: 200,
              itemStyle: {
                color: '#d223e7'
              }
            }
          ],
          type: 'bar'
        }
      ]
    };
    function update_zhuzhuangtu() {
        $.get(
            "/api/capture/get_zhuzhuangtu_data",
            function (data, state) {
                // console.log(data);
                option_zhuzhuangtu.series = [
                    {
                      data: data.data,
                      type: 'bar'
                    }
                ]
                // console.log(option_zhuzhuangtu);
                option_zhuzhuangtu && myChart_zhuzhuangtu.setOption(option_zhuzhuangtu);
                // setTimeout(update_zhuzhuangtu, updateInterval)
            }
        );
    }
    option_zhuzhuangtu && myChart_zhuzhuangtu.setOption(option_zhuzhuangtu);
    if(real_time == 1){update_zhuzhuangtu();}

    // todo 玫瑰图
    var chartDom_meiguitu = document.getElementById('meiguitu');
    var myChart_meiguitu = echarts.init(chartDom_meiguitu, 'dark');
    var option_meiguitu;

    option_meiguitu = {
      legend: {
        top: 'bottom'
      },
      toolbox: {
        show: true,
        feature: {
          mark: { show: true },
          dataView: { show: true, readOnly: false },
          restore: { show: true },
          saveAsImage: { show: true }
        }
      },
      series: [
        {
          name: 'Nightingale Chart',
          type: 'pie',
          radius: [50, 250],
          center: ['50%', '50%'],
          roseType: 'area',
          itemStyle: {
            borderRadius: 8
          },
          data: [
            { value: 40, name: 'rose 1' },
            { value: 38, name: 'rose 2' },
            { value: 32, name: 'rose 3' }
          ]
        }
      ]
    };
    function update_meiguitu() {
        $.get(
            "/api/capture/get_meiguitu_data",
            function (data, state) {
                // console.log(data);
                option_meiguitu.series[0].data = data.data;
                option_meiguitu && myChart_meiguitu.setOption(option_meiguitu);
                // setTimeout(update_meiguitu, updateInterval)
            }
        );
    }
    option_meiguitu && myChart_meiguitu.setOption(option_meiguitu);
    if(real_time == 1){update_meiguitu();}

    </script>
{% endblock %}
